<script setup lang="ts">
defineOptions({
  name: 'Card',
})
</script>

<template>
  <div class="mushroom-card">
    <div class="top">
      <img
        src="https://mushroom-front.oss-cn-shanghai.aliyuncs.com/banner/carousel-img04.jpg"
        alt=""
      />
      <div>
        <span>类别: 红蘑菇</span>
        <span>毒性: 红蘑菇</span>
      </div>
    </div>
    <div class="bottom">
      <p class="desc">
        红菇属大多数种类是可食用的，且营养丰富，味道鲜美，有“菇中之王”的美称，系天然营养佳品，具有较高的营养价值。红菇含有丰富的必需氨基酸、多糖、有机酸、维生素、脂肪酸和甾类化合物、色素和抗生素等。
      </p>
    </div>
    <van-button type="primary">查看详情</van-button>
  </div>
</template>

<style scoped lang="less">
.mushroom-card {
  width: 320px;
  height: 200px;
  padding: 16px;
  border-radius: 6px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);

  display: flex;
  flex-direction: column;
  gap: 8px;

  .top {
    display: flex;
    gap: 32px;

    img {
      width: 80px;
      height: 80px;
      border-radius: 4px;
    }

    div {
      flex: 1;
      letter-spacing: 0.2em;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 16px;
    }
  }

  .bottom {
    flex: 1;
    color: #828080;

    .desc {
      font-size: 13px;
      text-indent: 2em;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2; /* 控制显示的行数 */
      -webkit-box-orient: vertical;
    }
  }
}
</style>
